<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>403</title>

    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">

    <meta name="msapplication-TileColor" content="#5bc0de"/>
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <!--<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css">
    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/assets/lib/animate.css/animate.css"/>
    <link rel="stylesheet" href="/assets/lib/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/assets/lib/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/lib/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        .text_info {
            border: 0px;
        }
    </style>


    <![endif]-->
</head>

<body>
<div class="bg-dark dk" id="wrap" style="height:50px;">
    <header class="head">
        <div class="">
            <ol class="breadcrumb" style="background-color: #3a3a3a">
                <li><a href="#"> <i class="fa fa-home"> 用户管理</i></a></li>
                <li class="active">用户关系（加载）</li>
            </ol>
        </div>
        <!-- /.main-bar -->
    </header>
</div>
<div class="container" style="width:100%;">
    <div class="row">
        <div class="col-lg-12">
            <div class="box dark">
                <header>
                    <div class="icons"><i class="fa fa-th-large"></i></div>
                    <h5>查询</h5>
                    <div class="toolbar">
                        <nav style="padding: 8px;">
                        </nav>
                    </div>
                </header>

                <div class="row">
                    <div class="col-lg-12">
                        <div>
                            <input type="text" id="key" class="empty form-control padding-left" placeholder="输入关键字..."
                                   onkeyup="callNumber()">
                            <label type="text" id="resultKey" class="form-control">
                                <div>
                                    <a id="clickUp" class="glyphicon glyphicon-menu-up" onclick="clickUp()"></a>
                                    <a id="clickDown" class="glyphicon glyphicon-menu-down"
                                       onclick="clickDown()"></a>
                                </div>
                                <label id="number"></label>
                            </label>
                        </div>

                    </div>
                </div>
                <div id="menuContent" class="menuContent">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>


            </div>
        </div>


    </div>


</div>
<!--jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!--Bootstrap -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/assets/lib/select2/js/select2.min.js"></script>
<script src="/assets/lib/treegrid/bootstrap-treegrid.js"></script>
<script src="/assets/lib/ztree/jquery.ztree.all.min.js"></script>
<script src="/assets/lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!-- MetisMenu -->
<script src="/assets/lib/metismenu/metisMenu.js"></script>
<!-- Metis core scripts -->
<script src="/assets/js/core.js"></script>
<script src="/assets/js/distpicker.data.js"></script>
<script src="/assets/js/distpicker.js"></script>


<!-- Metis demo scripts -->
<script src="/assets/js/app.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script>
    var csrf_token = "${_csrf.token}";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrf_token
        }
    });
    layer.config({
        extend: 'extend/layer.ext.js'
    });

    $(document).ready(function () {
        initTree();
        document.getElementById("key").value = ""; //清空搜索框中的内容
        //绑定事件
        key = $("#key");
        key.bind("focus", focusKey)
            .bind("blur", blurKey)
            .bind("propertychange", searchNode) //property(属性)change(改变)的时候，触发事件
            .bind("input", searchNode);
    });

    var setting = {
        view: {
            selectedMulti: false //是否允许多选
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        check: {//表示tree的节点在点击时的相关设置
            enable: false,//是否显示radio/checkbox
            chkStyle: "checkbox",//值为checkbox或者radio表示
            checkboxType: {p: "", s: ""},//表示父子节点的联动效果
            radioType: "level"//设置tree的分组
        },
        callback: {//表示tree的一些事件处理函数
            onClick: handlerClick
        }
    };
    function initTree() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/get/tree/members",
            beforeSend: function () {
            },
            async: false,
            success: function (res) {
                if (res.status) {
                    layer.msg("获取权限失败", {icon: 7});
                } else {
                    var treeData = res;
                    $.fn.zTree.init($("#treeDemo"), setting, treeData);

                }
            },
            error: function (xhr, errorType, error) {
                layer.msg("获取角色失败", {icon: 7});
            },
            complete: function () {
            }
        });

    }

    function handlerClick(event, treeId, treeNode) {
        var $form = $(event.target).closest("form");
        $form.find("input[name='pidName']").val(treeNode.name);
        $form.find("input[name='pid']").val(treeNode.id);
    }


    var lastValue = "", nodeList = [], fontCss = {};
    //键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中
    function callNumber() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        //如果结果有值，则显示比例；如果结果为0，则显示"[0/0]"；如果结果为空，则清空标签框；
        if (nodeList.length) {
            //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
            zTree.selectNode(nodeList[0], false);
            document.getElementById("key").focus();

            clickCount = 1; //防止重新输入的搜索信息的时候，没有清空上一次记录

            //显示当前所在的是第一条
            document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";

        } else if (nodeList.length == 0) {
            document.getElementById("number").innerHTML = "[0/0]";
            zTree.cancelSelectedNode(); //取消焦点
        }

        //如果输入框中没有搜索内容，则清空标签框
        if (document.getElementById("key").value == "") {
            document.getElementById("number").innerHTML = "";
            zTree.cancelSelectedNode();
        }
    }
    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }
    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
    }
    //搜索节点
    function searchNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var value = $.trim(key.get(0).value);
        var keyType = "name";

        if (key.hasClass("empty")) {
            value = "";
        }
        if (lastValue === value) return;
        lastValue = value;
        if (value === "") {
            updateNodes(false);
            return;
        }
        ;
        nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能，得到符合条件的节点
        updateNodes(true); //更新节点
    }

    //高亮显示被搜索到的节点
    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodeList.length; i < l; i++) {
            nodeList[i].highlight = highlight; //高亮显示搜索到的节点(highlight是自己设置的一个属性)
            zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开
            zTree.updateNode(nodeList[i]); //更新节点数据，主要用于该节点显示属性的更新
        }
    }

    //设置颜色
    function getFontCss(treeId, treeNode) {
        return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }

    //点击向上按钮时，将焦点移向上一条数据
    function clickUp() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //如果焦点已经移动到了最后一条数据上，就返回第一条重新开始，否则继续移动到下一条
        if (nodeList.length == 0) {
            alert("没有搜索结果！");
            return;
        } else if (clickCount == 1) {
            alert("您已位于第一条记录上！");
            return;
            //让结果集里边的下一个节点获取焦点（主要为了设置背景色），再把焦点返回给搜索框
            //zTree.selectNode(nodeList[clickCount], false)
        } else {
            //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框

            zTree.selectNode(nodeList[clickCount - 2], false);
            clickCount--;
        }
        document.getElementById("key").focus();
        //显示当前所在的是条数
        document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";
    }
    //点击向上按钮时，将焦点移向下一条数据
    function clickDown() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //如果焦点已经移动到了最后一条数据上，则提示用户（或者返回第一条重新开始），否则继续移动到下一条
        if (nodeList.length == 0) {
            alert("没有搜索结果！");
            return;
        } else if (nodeList.length == clickCount) {
            alert("您已位于最后一条记录上！")
            return;
        } else {
            //让结果集里边的第一个获取焦点（主要为了设置背景色），再把焦点返回给搜索框
            zTree.selectNode(nodeList[clickCount], false)
            clickCount++;
        }
        document.getElementById("key").focus();
        //显示当前所在的条数
        document.getElementById("number").innerHTML = "[" + clickCount + "/" + nodeList.length + "]";
    }


    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    };

</script>
</body>

</html>
